<template>
  <div
    class="node-card"
    :style="{ width: width, backgroundColor: bgColor[note.imgUrl]}"
  >
    <div class="top">
      <p class="time">{{ dayjs(note.moment).format('YYYY-MM-DD') }}</p>
      <p class="label">{{ label[note.type][note.label] }}</p>
    </div>
    <div class="message">
     {{ note.message }}
    </div>
    <div class="foot">
      <div class="foot-left">
        <div class="aixing">
          <span @click.prevent="handenlike" class="iconfont icon-aixin" :class="{lick: isFeedBack}"></span>
          <span>{{ feedBack.total || 0 }}</span>
        </div>
        <div class="liuyan">
          <span class="iconfont icon-liuyan" ></span>
          <span>{{ comments.total || 0 }}</span>
        </div>
      </div>
      <div class="name">{{ note.name }}</div>
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs"
import { defineProps, onMounted, ref, inject, computed,reactive,watch} from 'vue'
import { label, bgColor } from "@/utils/data"
import { getComment } from "@/api/comments"
import { getFeedBack, addFeedBack } from "@/api/feedbacks"
import { useMainStore } from "../store/index.js"

const store = useMainStore()

// 消息提示组件
const $message = inject('$message');

const props = defineProps({
  width: {
    default: '288px',
    type: String,
  },
  note: {
    type: Object,
    default: () => {
      return {}
    }
  },
  ip: {
    type: String,
    default: ''
  }
})

// 评论数据
const comments = ref({})

// 获取状态(点赞 举报)数据
let feedBack = computed(() => store.getMesStates(props.note._id))

// 是否点赞
let isFeedBack = computed(() => store.isFeedBack(props.note._id, props.ip))

// 状态表单数据
const feedForm = {
  "WaLLId": 1,
  "userId": "",
  "tyPe": 0,
  "moment": ""
}

// 监听note._id的变化，重新获取数据
watch(() => props.note._id, () => {
  getComments()
  getFeedBacks()
})


// 获取评论数据
async function getComments() {
  const res = await getComment({
    WaLLId: props.note._id
  })
  comments.value = res
}

// 获取状态(点赞 举报)数据
async function getFeedBacks() {
  const res = await getFeedBack({
    WaLLId: props.note._id
  })
  store.setMesStates(props.note._id, res)
  // feedBack = store.getMesStates(props.note._id)
}

// 添加状态数据 tyPe 0 喜欢 1 举报 2 撤销
async function addFeedBacks(tyPe) {
  feedForm.tyPe = tyPe
  feedForm.userId = props.ip
  feedForm.WaLLId = props.note._id
  feedForm.moment = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')

  const res = await addFeedBack(feedForm)
  if (res.code === 200) {
    $message({type: 'success', message: '点赞成功'})
    getFeedBacks()
  }
  if(res.code === 505) {
    $message({type: 'warning', message: '已经点赞过了(๑˃ᴗ˂)ﻭ'})
  }
}

// 点赞事件
function handenlike() {
  addFeedBacks(0)
}

onMounted(() => {
  // 获取评论数据
  getComments()
  // 获取状态数据
  getFeedBacks()

})


</script>

<style lang="less" scoped>
.node-card {
  height: 240px;
  padding: 10px 20px;
  position: relative;
  .top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    p {
      font-size: 12px;
      color: @gray-3;
      font-weight: 400;
    }
  }
  .message {
    height: 140px;
    font-size: 14px;
    color: @gray-1;
    font-family: '宋体';
  }
  .foot {
    position: absolute;
    bottom: 16px;
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    .foot-left {
      display: flex;
      align-items: center;
      .aixing {
        margin-right: 6px;
        cursor: pointer;
        &:hover .icon-aixin{
          color: @error-color;
        }
        .lick {
          color: @error-color;
        }
      }
      span {
        font-size: @font-size-12;
        color: @gray-2;
        margin-right: 4px;
      }
      .iconfont {
        font-size: @font-size-16;
      }
     
    }
    .name {
      font-family: "宋体";
      font-size: @font-size-16;
    }
  }
}
</style>
